<template>
  <div class="date-bar">
    <el-row
      type="flex"
      :gutter="20">
      <el-col :span="10">
        <el-date-picker
          v-model="selsectTime"
          type="daterange"
          align="right"
          placeholder="选择日期范围"
          range-separator=" 至 "
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-col>
      <el-col
        :span="10"
        style="text-align:center;">
      <el-button
        type="primary"
        @click="select">
        <span class="el-icon-search"></span>搜索日报
      </el-button>
    </el-col>
  </el-row>
</div>
</template>
<script >

export default {
  name: 'diary-date-screen-bar',
  data () {
    return {
      selsectTime: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '本周',
            onClick (picker) {
              const start = new Date()
              const end = new Date()
              start.setDate(end.getDate() - end.getDay() + 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本月',
            onClick (picker) {
              const start = new Date()
              const end = new Date()
              start.setDate(1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近30天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近90天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    select () {
      if (this.$route.name === 'DiaryDisplayView') {
        this.$store.dispatch('getDiaryList', this.selsectTime)
      } else if (this.$route.name === 'DiaryRefillView') {
        this.$store.dispatch('getEmptyDateList', this.selsectTime)
      }
    }
  }
}
</script>
<style  scoped>
.date-bar {
  background: #EEF6F3;
  margin: 10px 0 10px 0;
}
</style>
